<template>
  <div class="app-container">
    <div>
      <el-form :inline="true" :model="torrentQuery" size="mini">
        <el-form-item label="标题">
          <el-input v-model="torrentQuery.user" placeholder="标题" class="el-input"/>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="torrentQuery.region" placeholder="分类" class="el-input">
            <el-option label="区域一" value="shanghai"/>
            <el-option label="区域二" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="torrentQuery.region" placeholder="分类" class="el-input">
            <el-option label="区域一" value="shanghai"/>
            <el-option label="区域二" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item label="免费类型">
          <el-select v-model="torrentQuery.region" placeholder="分类" class="el-input">
            <el-option label="区域一" value="shanghai"/>
            <el-option label="区域二" value="beijing"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <br>

    <div>
      <el-table :data="page.record" :cell-style="{padding:0+'px'}" style="width: 80%">
        <el-table-column align="center" label="类型" width="55">
          <template slot-scope="scope">
            {{ scope.row.type }}
          </template>
        </el-table-column>

        <el-table-column label="标题" min-idth="750px">
          <template slot-scope="scope">
            <table style="width: 100% ;min-width: 550px">
              <tr>
                <td rowspan="3" style="width: 120px">
                  <el-image class="cover" :src='getResource(scope.row)' :preview-src-list="[scope.row.imgList]" lazy/>
                </td>
                <td>
                  <div style="display: inline-block"> {{ scope.row.name }}</div>
                  <div style="display: inline-block; float:right;  font-size: 20px">
                    <i class="el-icon-download"/>
                  </div>
                  <div style="display: inline-block; float:right;width: 30px; font-size: 20px">
                    <i :class="starClass(scope.row)"/>
                  </div>
                </td>
              </tr>
              <tr>
                <td>{{ scope.row.title }}</td>
              </tr>
              <tr>
                <td>
                  <el-progress :percentage="showProgress(scope.row)" :format="format"/>
                </td>
              </tr>
            </table>


          </template>
        </el-table-column>

        <el-table-column label="上传时间" width="100" align="center">
          <template slot-scope="scope">
            <span>{{ formatDate(scope.row.uploadTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="大小" width="70" align="center">
          <template slot-scope="scope">
            {{ showSize(scope.row.size) }}
          </template>
        </el-table-column>
        <el-table-column label="做种" width="50" align="center">
          <template slot-scope="scope">
            {{ scope.row.status }}
          </template>
        </el-table-column>

        <el-table-column label="下载" width="50" align="center">
          <template slot-scope="scope">
            {{ scope.row.status }}
          </template>
        </el-table-column>
        <el-table-column label="完成" width="50" align="center">
          <template slot-scope="scope">
            {{ scope.row.status }}
          </template>
        </el-table-column>
        <el-table-column label="发布者" width="80" align="center">
          <template slot-scope="scope">
            {{ scope.row.uploadUserName }}
          </template>
        </el-table-column>
      </el-table>

      <div>
        <br><br><br>
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="page.pageNo"
          :page-size="page.pageSize"
          :total="page.total"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {getList} from '@/api/table'

import {getResource} from '@/api/common'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      torrentQuery: {
        user: '',
        region: ''
      },
      page: {
        record: null,
        pageNo: 1,
        pageSize: 25,
        total: 25
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {

    getResource(row) {
      return  process.env.VUE_APP_HOST+"/api/nexus/resource?path=" + row.infoHash + "/" + row.coverPath + "&token=" + this.$store.getters.token
    },

    onSubmit() {
      console.log('submit!')
    },
    fetchData() {
      getList(this.torrentQuery).then(response => {
        this.page = response.body.result
        console.log(this.page)
      })
    },
    showSize: function (size) {
      return this.$showSize(size)
    },
    formatDate(millisecond) {
      const ut = this.$moment(millisecond)
      return ut.format('MM-DD hh:mm')
    },

    showProgress(row) {
      const d = row.downloaded ? row.downloaded : 0
      const l = row.left ? row.left : 0
      const dl = d + l
      if (dl === 0) {
        return 0
      } else {
        return Math.round(d * 1000 / dl) / 10
      }
    },
    starClass(row) {
      console.log(row.utStatus)
      return row.utStatus !== undefined ? 'el-icon-star-on' : 'el-icon-star-off'
    },

    format(percentage) {
      return ''
    }

  }
}
</script>

<style lang="scss" scoped>
.app-container {


  .cover {
    margin: 2px;
    height: 70px;
    float: left;
  }

  li {
    list-style: none;
  }


}
</style>
